﻿<template>
  <a-card bordered title="访问策略详情">
    <a-spin :spinning="spinning">
      <a-descriptions
        bordered
        size="small"
        :column="{ xxl: 4, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }"
      >
        <a-descriptions-item label="开始IP">
          {{ entity.startIp }}
        </a-descriptions-item>
        <a-descriptions-item label="结束IP">
          {{ entity.endIp }}
        </a-descriptions-item>
        <a-descriptions-item label="控制策略">
          {{ entity.accessStrategy }}
        </a-descriptions-item>
        <a-descriptions-item label="开始时间">
          {{ entity.startTime }}
        </a-descriptions-item>
        <a-descriptions-item label="结束时间">
          {{ entity.endTime }}
        </a-descriptions-item>
        <a-descriptions-item label="创建人">
          {{ entity.createUser }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ entity.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="修改人">
          {{ entity.updateUser }}
        </a-descriptions-item>
        <a-descriptions-item label="修改时间">
          {{ entity.updateTime }}
        </a-descriptions-item>
      </a-descriptions>

      <!--保存按钮-->
      <footer-tool-bar>
        <a-button @click="handleRefresh">返回</a-button>
      </footer-tool-bar>
    </a-spin>
  </a-card>
</template>

<script>
import { getAuthIp } from "./authIp";
import footerToolBar from "@/components/footerToolbar";
export default {
  components: {
    footerToolBar,
  },
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showDetail: false,
        };
      },
    },
  },
  data() {
    return {
      labelCol: { xs: { span: 24 }, sm: { span: 8 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      entity: {},
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //#region 加载数据
    loadData() {
      this.spinning = true;
      let that = this;
      //修改，详情获取详细信息
      getAuthIp(this.modifyEntity.id )
        .then((res) => {
          this.entity = res.data;
          that.spinning = false;
        })
        .catch((error) => {
          that.spinning = false;
        });
    },
    //#endregion

    //#region  取消、关闭
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    //#endregion
  },
};
</script>
